<template>
	<uni-popup ref="dialog" :type="type" :mask-click="mask" :is-mask-click="mask" @maskClick="handleMask">
		<view :class="className" :style="{ marginTop: `${offset}rpx` }">
			<slot name='header'></slot>
			<view class="body">
				<view v-if="title" class="title">{{ title }}</view>
				<slot></slot>
			</view>
			<view class="pay-Box " v-if="isPay && isPwdShow">
				<template v-if="userinfo.isSetPaymentPassword">
					<view class="form-Item">
						<input type="password" v-model="pwd" placeholder="请输入支付密码" />
					</view>
				</template>
				<template v-else>
					<view class="pay-error">
						<text>未设置安全密码，前往设置</text>
					</view>
				</template>
			</view>
			<view class="footer">
				<m-button class="cancel" type="falls" v-if="showCancel"
					@click="handleCancel">{{ cancelText }}
				</m-button>
				<m-button class="confirm" v-if="showConfirm" :loading="loading"
					@click="handleConfirm">{{ confirmText }}
				</m-button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import props from './props.js';
	import { mapState } from 'vuex'
	import { fingerprint } from '@/utils/tools.js'
	import { getFingerToken, setFingerToken, removeFingerToken } from '@/utils/auth.js'
	import md5 from 'js-md5'
	export default {
		name: "m-dialog",
		mixins: [props],
		watch: {
			isShow(val) {
				if (val) {
					//如果有指纹默认不打开密码框
					this.isPwdShow = this.forcePayShow || !this.isFinger
					this.open();
				} else {
					setTimeout(() => {
						this.pwd = '';
					}, 100)
					this.close();
				}
			},
		},
		data() {
			return {
				pwd: '',
				isPwdShow: false,
			};
		},
		computed: {
			...mapState({
				isFinger: state => state.setting.isFinger,
				userinfo: state => state.user.userinfo
			}),
			className() {
				return [
					this.bgType,
					this.type == 'dialog' ? 'my-modal' : 'isPopup',
				]
			},
			// confirmText1() {
			// 	if (this.userinfo.paypassword == '1') {
			// 		return "前往设置";
			// 	} else {
			// 		return '确定';
			// 	}
			// },
		},
		mounted() {},
		methods: {
			open() {
				this.$refs.dialog.open();
			},
			close() {
				this.$refs.dialog.close();
			},
			handleItem(item, index) {
				this.current = index;
			},
			async handleConfirm() {
				//是密码支付时
				if (this.isPay) {
					// 未设置密码
					if (!this.userinfo.paypassword) {
						this.confirmText1 = ''
						this.$emit("handleCancel");
						this.close()
						return this.Jump('/pages/mine/setAccount/security/editorPay/editorPay');
					}
					//处理当指纹验证失败 重新验证时再次进入指纹认证 
					//密码框处于打开状态则不再验证指纹
					let pwd = this.pwd;
					if (this.isFinger && !this.isPwdShow) {
						const success = await fingerprint();
						if (success) {
							const { code, data } = await getFingerToken();
							pwd = data;
						} else {
							this.Toast('验证失败')
							this.isPwdShow = true;
							return
						}
					} else {
						if (!pwd) {
							this.Toast('请输入密码');
							return
						} else {
							// pwd = md5(pwd)
						}
					}
					return this.$emit("handleConfirm", pwd);
				}
				this.$emit("handleConfirm");
			},
			handleCancel() {
				this.$emit("handleCancel");
			},
			handleMask() {
				this.$emit("update:isShow", false);
			},
		},
	};
</script>

<style lang="scss">
	.white {
		background: #fff;
		color: #333;

		.cancel {
			background: #EEECEC !important;
			color: #999999;
		}

		.confirm {
			background: linear-gradient(270deg, #304FFF 0%, #304FFF 100%);
		}

		.pay-Box {
			.form-Item {
				background: #F6F6F6;
				border: unset;

				input {
					color: #111;
				}
			}
		}

	}

	.black {
		background: #FFFFFF;
		color: #ffffff;
	}

	.my-modal {
		width:600rpx;
		border-radius: 28rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 12;
	}

	.isPopup {
		padding: 40rpx 30rpx;
		border-radius: 16rpx 16rpx 0 0;
	}

	.body {
		margin-bottom: 40rpx;

		>.title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			line-height: 44rpx;
			margin-bottom: 24rpx;
			text-align: center;
		}

	}

	.pay-Box {
		.form-Item {
			margin: 40rpx 0;
			background: #333850;
			border: 1px solid #4D536B;
			border-radius: 15rpx;
			padding: 20rpx 28rpx;
			box-sizing: border-box;

			input {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFEFE;
			}
		}

		.pay-error {
			margin: 40rpx 0;
			text-align: center;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ff1008;
			}
		}

	}


	.footer {
		display: flex;

		&>* {
			flex: 1;
			padding: 15rpx 0;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;

			&:not(:first-child) {
				margin-left: 20rpx;
			}
		}
	}
</style>